<template>
  <div
    class="engineering-manage-container animate__animated"
    :class="[visible ? 'animate__zoomIn' : 'animate__zoomOut']"
  >
    <div class="large-screen-body">
      <!-- 左侧 -->
      <div class="left-container">
        <div class="card-container run-time">
          <div class="card-header">平台累计运行时间</div>
          <div class="card-body">
            <div class="time">
              {{ substrinDate(runTime.days || "00")
              }}<span class="unit">天</span
              >{{ substrinDate(runTime.hours || "00")
              }}<span class="unit">小时</span
              >{{ substrinDate(runTime.minutes || "00")
              }}<span class="unit">分</span
              >{{ substrinDate(runTime.seconds || "00")
              }}<span class="unit">秒</span>
            </div>
            <div class="base"></div>
          </div>
        </div>
        <div
          class="card-container accumulated-project-statistics"
          @click="projectListModalVisible = true"
        >
          <div class="card-header">累计项目统计</div>
          <div class="card-body">
            <div class="accumulated-icon">
              <div class="ani-icon"></div>
            </div>
            <div class="accumulated-body">
              <div class="sub-title">累计管理项目数</div>
              <div class="number-statistics">
                <div class="num-item">
                  {{ projectSoucre.projectCount[0] || 0 }}
                </div>
                <div class="num-item">
                  {{ projectSoucre.projectCount[1] || 0 }}
                </div>
                <div class="num-item">
                  {{ projectSoucre.projectCount[2] || 0 }}
                </div>
                <div class="num-item">
                  {{ projectSoucre.projectCount[3] || 0 }}
                </div>
                <div class="unit">个</div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-container under-project-statistics">
          <div class="card-header">在建项目统计</div>
          <div class="card-body">
            <div class="chart-unit">单位：个</div>
            <div class="chart-bg"></div>
            <div class="chart-text">
              <div class="total">{{ projectSoucre.yearBuild }}</div>
              <div class="pro">在建项目数</div>
            </div>
            <div class="chart-dom" ref="pie-chart"></div>
          </div>
        </div>
        <div class="card-container people-number">
          <div class="card-header">现场实时人数</div>
          <div class="card-body">
            <div class="chart-unit">单位：人</div>
            <div class="chart-dom" ref="real-time-people"></div>
            <div class="total-number">
              投入总人数：<span>{{ totalPeople }}</span>
              人
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="center-container">
        <div class="card-container data-overview">
          <div class="card-header">数据概览</div>
          <div class="card-body">
            <div class="invest">
              <div class="sub-title">年度投资情况</div>
              <div class="money-warp">
                <div class="money-item">
                  <div class="money-icon icon-1"></div>
                  <div class="money-content">
                    <div class="value">
                      {{ investmentSource.total || "0" }} <span>亿元</span>
                    </div>
                    <div class="name">年度基建计划总投资</div>
                  </div>
                </div>
                <div class="seat"></div>
                <div class="money-item">
                  <div class="money-icon icon-2"></div>
                  <div class="money-content">
                    <div class="value">
                      {{ investmentSource.reality || "0" }} <span>亿元</span>
                    </div>
                    <div class="name">年度已开工实际投资</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="vertical-line"></div>
            <div class="situation">
              <div class="start-project">
                <div class="sub-title">年度开工情况</div>
                <div class="pro-warp">
                  <div class="warp-item">
                    <div class="data-icon icon-3"></div>
                    <div class="data-content">
                      <div class="value">
                        {{ investmentSource.yearPlanStart || "0" }}
                        <span>个</span>
                      </div>
                      <div class="name">年度计划开工项目</div>
                    </div>
                  </div>
                  <div class="warp-item">
                    <div class="data-icon icon-4"></div>
                    <div class="data-content">
                      <div class="value">
                        {{ investmentSource.yearRealityStart || "0" }}
                        <span>个</span>
                      </div>
                      <div class="name">年度实际开工项目</div>
                    </div>
                  </div>
                  <div class="warp-item">
                    <div class="data-icon icon-5"></div>
                    <div class="data-content">
                      <div class="value">
                        {{ investmentSource.yearStartRate || "0" }}
                        <span>%</span>
                      </div>
                      <div class="name">年度开工率</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="horizontal-line"></div>
              <div class="end-project">
                <div class="sub-title">年度交工情况</div>
                <div class="pro-warp">
                  <div class="warp-item">
                    <div class="data-icon icon-6"></div>
                    <div class="data-content">
                      <div class="value">
                        {{ investmentSource.yearPlanEnd || "0" }}
                        <span>个</span>
                      </div>
                      <div class="name">年度计划交工项目</div>
                    </div>
                  </div>
                  <div class="warp-item">
                    <div class="data-icon icon-7"></div>
                    <div class="data-content">
                      <div class="value">
                        {{ investmentSource.yearRealityEnd || "0" }}
                        <span>个</span>
                      </div>
                      <div class="name">年度已交工项目</div>
                    </div>
                  </div>
                  <div class="warp-item">
                    <div class="data-icon icon-8"></div>
                    <div class="data-content">
                      <div class="value">
                        {{ investmentSource.yearEndRate || "0" }} <span>%</span>
                      </div>
                      <div class="name">年度交工率</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-container internet-things">
          <div class="number-devices">
            <div class="item">
              设备总数：<span>{{ lotOnlineParams.total || 0 }}</span
              >台
            </div>
            <div class="item">
              在线数：<span>{{ lotOnlineParams.online || 0 }}</span
              >台
            </div>
            <div class="item">
              离线数：<span>{{ lotOnlineParams.offline || 0 }}</span
              >台
            </div>
          </div>
          <div class="card-header">智慧工地物联网上线情况</div>
          <div class="card-body">
            <div
              class="internet-item"
              v-for="(item, index) in lotOnlineSoucre"
              :key="index"
            >
              <div class="round">
                <span>{{ item.total }}</span
                >/<span>{{ item.num }}</span>
              </div>
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="card-container line-situation">
          <div class="card-header">关键线路进度达成情况</div>
          <div class="card-body">
            <carouselLine
              v-if="carousel.visible"
              :dataSoucre="peojectLineParams"
            ></carouselLine>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right-container">
        <div class="card-container technology-achievement">
          <div class="card-header">十四五时期科技成果（2021-2025）</div>
          <div class="card-body">
            <div
              class="bar-item"
              v-for="(item, index) in achievementList"
              :key="index"
            >
              <div class="icon" :class="['icon-' + index]"></div>
              <div class="total-statistics">
                <div class="value">{{ item.total }}</div>
                <div class="name">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="card-container environment"
          @click.stop="environmentModalVisible = true"
        >
          <div class="group-button">
            <div
              @click.stop="handleCarousel(1)"
              :class="[carousel.index == 1 && 'active']"
            >
              扬尘
            </div>
            <div
              @click.stop="handleCarousel(2)"
              :class="[carousel.index == 2 && 'active']"
            >
              噪音
            </div>
            <div
              @click.stop="handleCarousel(3)"
              :class="[carousel.index == 3 && 'active']"
            >
              温湿度
            </div>
          </div>
          <div class="card-header">现场环境参数</div>
          <div class="card-body">
            <div class="chart-unit">单位：{{ carousel.unit }}</div>
            <div class="device-state">
              <div>
                设备总数：<span>{{ environmentParams.total || 0 }} </span>台
              </div>
              <div>
                在线数：<span>{{ environmentParams.online || 0 }} </span>台
              </div>
              <div>
                离线数：<span>{{ environmentParams.offline || 0 }} </span>台
              </div>
            </div>
            <div class="chart-dom" ref="line-chart"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 项目列表 -->
    <projectListModal
      :visible.sync="projectListModalVisible"
    ></projectListModal>
    <!-- 环境参数 -->
    <environmentListModal
      :visible.sync="environmentModalVisible"
    ></environmentListModal>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
import echarts from "echarts";
import { statisticsQuarter } from "@/api/safetyManage";
import projectListModal from "./projectListModal";
import environmentListModal from "./environmentListModal";
import carouselLine from "./carouselLine";
export default {
  name: "EngineeringManage",
  components: {
    projectListModal,
    carouselLine,
    environmentListModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      //运行时间
      runTime: {},
      interval: null,
      //十四五时期科技成果
      achievementList: [],
      //投资情况
      investmentSource: {
        //计划投资
        total: "",
        //实际投资
        reality: "",
        //计划开工
        yearPlanStart: "",
        //实际开工
        yearRealityStart: "",
        //开工率
        yearStartRate: "",
        //计划交工
        yearPlanEnd: "",
        //实际交工
        yearRealityEnd: "",
        //交工率
        yearEndRate: "",
      },
      //季度检查
      quarterInstance: null,
      projectSoucre: {
        projectCount: [],
        yearStart: [],
        yearEnd: [],
        yearBuild: 0,
      },

      //在建项目统计
      projectInstance: null,
      //建设情况
      constructSoucre: [],
      //环境参数
      environmentInstance: null,
      environmentSoucre: [],
      environmentParams: {},
      //物联网在线情况
      lotOnlineSoucre: [],
      lotOnlineParams: {},
      //总人数
      totalPeople: 0,
      //
      carousel: {
        name: "扬尘数据监测",
        index: 1,
        unit: "μg/m³",
        start: false,
        interval: null,
        visible: false,
      },
      projectListModalVisible: false,
      peojectLineParams: [],
      //现场实时人数
      realTimeInstance: null,
      environmentModalVisible: false,
    };
  },
  mounted() {
    this.interval = setInterval(() => {
      this.runTime = this.calculateTimeDifference(2024, 5, 18);
    }, 1000);
    this.getData();
  },
  methods: {
    //查询数据接口
    getData() {
      Promise.all([
        this.getProjectData(),
        this.getInvestmentData(),
        this.getTechnologyData(),
        this.getStaffStatics(),
        this.getProjectLineData(),
      ]);
    },
    //查询项目数据
    getProjectData() {
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/bigScreen/projectStatisticsManagePlatform`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            //累计项目统计
            this.projectSoucre.projectCount = this.substringByProject(
              data?.projectCount ?? ""
            );
            //在建项目数
            this.projectSoucre.yearBuild = data.yearBuild;

            ///////////////////////////////////////////////////////////
            this.investmentSource.yearPlanStart = data.yearPlanStart;
            this.investmentSource.yearRealityStart = data.yearRealityStart;
            this.investmentSource.yearStartRate = data.yearStartRate;
            this.investmentSource.yearPlanEnd = data.yearPlanEnd;
            this.investmentSource.yearRealityEnd = data.yearRealityEnd;
            this.investmentSource.yearEndRate = data.yearEndRate;
            ///////////////////////////////////////////////////////////

            this.constructSoucre = data?.constructionSituation ?? [];
            //物联网在线情况
            this.lotOnlineSoucre = data?.lotOnlineSituation?.list ?? [];
            this.lotOnlineParams = data?.lotOnlineSituation ?? {};
            //现场环境人数
            this.environmentParams = data?.environmentParams ?? {};
            this.environmentSoucre = this.environmentParams?.chartData ?? [];
            this.$nextTick((_) => {
              setTimeout(() => {
                //在建项目统计
                this.underProjectDrawPieChart(data?.areaDataList ?? []);
                //现场环境参数
                this.environmentDrawLineChart();
                this.startCarousel();
              }, 300);
            });
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },

    //平台累计运行时间
    calculateTimeDifference(year, month, day) {
      var targetDate = new Date(year, month - 1, day);
      var currentDate = new Date();

      var timeDifference = targetDate.getTime() - currentDate.getTime();

      var seconds = Math.floor(timeDifference / 1000);
      var minutes = Math.floor(seconds / 60);
      var hours = Math.floor(minutes / 60);
      var days = Math.floor(hours / 24);

      seconds = seconds % 60;
      minutes = minutes % 60;
      hours = hours % 24;

      return {
        days: days,
        hours: hours,
        minutes: minutes,
        seconds: seconds,
      };
    },

    substrinDate(str = "") {
      let date = str.toString().slice(1);
      return date < 10 ? "0" + date : date;
    },

    //累计项目统计
    substringByProject(str = "") {
      let parts = Array.from(str.toString());
      let obj = {};
      if (parts.length == 1) {
        obj.total = "0" + "0" + "0" + parts?.[0];
      } else if (parts.length == 2) {
        obj.total = "0" + "0" + parts?.[0] + parts?.[1];
      } else if (parts.length == 3) {
        obj.total = "0" + parts?.[0] + parts?.[1] + parts?.[2];
      } else if (parts.length == 4) {
        obj.total = parts?.[0] + parts?.[1] + parts?.[2] + +parts?.[3];
      }
      return Array.from(obj.total);
    },

    //在建项目统计
    underProjectDrawPieChart(data = []) {
      let chartDom = this.$refs["pie-chart"];
      this.projectInstance = echarts.init(chartDom);
      var trafficWay = [];

      data.forEach((v) => {
        trafficWay.push({
          name: v.name,
          value: v.num,
          code: v.code,
        });
      });
      var data = [];
      var color = ["#00D5FF", "#1BF8C3", "#7676E4", "#419FFF", "#FFA500"];
      trafficWay.reverse();

      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 4,
                shadowBlur: 4,
                borderRadius: 20, // 圆角
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 0.5,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      let option = {
        color: color,
        tooltip: {
          show: false,
        },
        legend: {
          itemWidth: 8,
          itemHeight: 8,
          icon: "circle",
          top: "center",
          left: "56%",
          itemGap: 10,
          textStyle: {
            color: "#9CD4F6",
            fontSize: 14,
            rich: {
              a: {
                verticalAlign: "middle",
              },
              num: {
                color: "#B8F3FF",
                fontSize: 16,
              },
            },
          },
          formatter: (name) => {
            let item = trafficWay.filter((v) => v.name == name)[0];
            let { value } = item;
            return `${name}    {num|${value}}`;
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            hoverAnimation: false,
            clockWise: false,
            radius: [54, 59],
            center: ["28.8%", "53%"],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
            },
            data: data,
          },
        ],
      };
      option && this.projectInstance.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.projectInstance.resize();
      });
    },

    //现场实时人数
    getStaffStatics() {
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/bigScreen/staffInputStatics`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            //实时总人数
            this.totalPeople = res?.totalNum ?? 0;
            this.$nextTick((_) => {
              setTimeout(() => {
                //现场实时人数
                this.realTimePeopleDrawLineChart(res ?? {});
              }, 300);
            });
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },

    //现场实时人数
    realTimePeopleDrawLineChart(data = {}) {
      let chartDom = this.$refs["real-time-people"];
      this.realTimeInstance = echarts.init(chartDom);
      let option = {
        grid: {
          top: 46,
          bottom: 46,
          left: 50,
          right: 20,
        },
        legend: {
          show: false,
        },
        xAxis: {
          type: "category",
          data: data?.x || [],
          //坐标轴轴线相关设置
          axisLine: {
            lineStyle: {
              color: "rgba(68,97,108, 1)",
            },
          },
          //坐标轴刻度相关设置
          axisTick: {
            show: false,
          },
          //坐标轴在 grid 区域中的分隔线
          splitLine: {
            show: false,
          },
          //坐标轴刻度标签的相关设置
          axisLabel: {
            color: "#76AEC6",
            fontSize: 14,
            rotate: 25,
          },
        },
        yAxis: {
          type: "value",
          interval: 10,
          //坐标轴轴线相关设置
          axisLine: {
            lineStyle: {
              color: "rgba(68,97,108, 1)",
            },
          },
          //坐标轴刻度相关设置
          axisTick: {
            show: false,
          },
          //坐标轴刻度标签的相关设置
          axisLabel: {
            color: "#76AEC6",
            fontSize: 14,
          },
          //坐标轴在 grid 区域中的分隔线
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(219, 241, 255,0.35)",
            },
          },
        },
        series: [
          {
            name: "实时人数",
            type: "line",
            smooth: true,
            showSymbol: false,
            data: data?.y || [],
            //折线样式
            lineStyle: {
              color: "#11FFB4",
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(17, 255, 180, 0.5)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(17, 255, 180, 0)",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      option && this.realTimeInstance.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.realTimeInstance.resize();
      });
    },

    //投资情况
    getInvestmentData() {
      return new Promise((resolve, reject) => {
        axios
          .get(
            `/probusiness/bigScreen/investmentSituation`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.investmentSource.total = data.yearPlanInvestment;
            this.investmentSource.reality = data.yearCompleteInvestment;
            resolve();
          })
          .catch((_) => {
            this.investmentSource.total = "";
            this.investmentSource.reality = "";
            reject();
          });
      });
    },

    //查询线路数据
    getProjectLineData() {
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/portcommon/scheduleMilestoneProject/queryProjectList`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.peojectLineParams = res?.data ?? [];
            this.carousel.visible = true;
            resolve();
          })
          .catch((_) => {
            this.peojectLineParams = [];
            reject();
          });
      });
    },

    //十四五时期科技成果
    getTechnologyData() {
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/bigScreen/getKJCGList?start=2021&end=2025`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.achievementList = res?.data ?? [];
            resolve();
          })
          .catch((_) => {
            this.achievementList = [];
            reject();
          });
      });
    },

    //现场环境参数 轮播
    handleCarousel(index) {
      this.carousel.index = index;
      this.environmentInstance && this.environmentInstance.clear();
      let { chartData, chartData1, chartData2 } = this.environmentParams;
      switch (index) {
        case 1:
          this.environmentSoucre = chartData;
          this.carousel.name = "扬尘数据监测";
          this.carousel.unit = "μg/m³";
          break;
        case 2:
          this.environmentSoucre = chartData1;
          this.carousel.name = "噪音数据分析";
          this.carousel.unit = "dB";
          break;
        case 3:
          this.environmentSoucre = chartData2;
          this.carousel.name = "现场温、湿度数据监测";
          this.carousel.unit = "°C/%RH";
          break;
        default:
          break;
      }
      setTimeout(() => {
        this.environmentDrawLineChart();
      }, 300);
    },

    startCarousel() {
      this.carousel.interval = setInterval(() => {
        this.carousel.index++;
        if (this.carousel.index > 3) {
          this.carousel.index = 1;
        }
        this.handleCarousel(this.carousel.index);
      }, 30000);
      //60000;
    },

    //现场环境参数
    environmentDrawLineChart() {
      let { x = [], y = [], y1 = [] } = this.environmentSoucre;
      let { index } = this.carousel;

      let chartDom = this.$refs["line-chart"];
      this.environmentInstance = echarts.init(chartDom);

      let series = [],
        color = [];
      switch (index) {
        case 1:
          color = ["#F4AFFE", "#F7F753"];
          series = [
            {
              name: "PM10",
              type: "line",
              smooth: true,
              showSymbol: false,
              data: y,
              //折线样式
              lineStyle: {
                color: "#F4AFFE",
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(244, 175, 254, 0.5)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(244, 175, 254, 0)",
                      },
                    ],
                    false
                  ),
                },
              },
            },
            {
              name: "PM2.5",
              type: "line",
              smooth: true,
              showSymbol: false,
              data: y1,
              //折线样式
              lineStyle: {
                color: "#F7F753",
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(247, 247, 83, 0.5)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(247, 247, 83, 0)",
                      },
                    ],
                    false
                  ),
                },
              },
            },
          ];
          break;
        case 2:
          color = ["#fa7070"];
          series = [
            {
              name: "噪音",
              type: "line",
              smooth: true,
              showSymbol: false,
              data: y,
              //折线样式
              lineStyle: {
                color: "#fa7070",
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(250, 112, 112, 0.5)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(250, 112, 112, 0)",
                      },
                    ],
                    false
                  ),
                },
              },
            },
          ];
          break;
        case 3:
          color = ["#f7f753", "#00d5ff"];
          series = [
            {
              name: "温度",
              type: "line",
              smooth: true,
              showSymbol: false,
              data: y,
              //折线样式
              lineStyle: {
                color: "#f7f753",
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(247, 247, 83, 0.5)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(247, 247, 83, 0)",
                      },
                    ],
                    false
                  ),
                },
              },
            },
            {
              name: "湿度",
              type: "line",
              smooth: true,
              showSymbol: false,
              data: y1,
              //折线样式
              lineStyle: {
                color: "#00d5ff",
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(0, 213, 255, 0.5)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(0, 213, 255, 0)",
                      },
                    ],
                    false
                  ),
                },
              },
            },
          ];
          break;
        default:
          break;
      }
      let option = {
        color: color,
        grid: {
          top: 74,
          bottom: 46,
          left: 50,
          right: 20,
        },
        legend: {
          show: true,
          top: 40,
          right: 20,
          textStyle: {
            color: "#B8F3FF",
            fontSize: 12,
          },
        },
        xAxis: {
          type: "category",
          data: x,
          //坐标轴轴线相关设置
          axisLine: {
            lineStyle: {
              color: "rgba(68,97,108, 1)",
            },
          },
          //坐标轴刻度相关设置
          axisTick: {
            show: false,
          },
          //坐标轴在 grid 区域中的分隔线
          splitLine: {
            show: false,
          },
          //坐标轴刻度标签的相关设置
          axisLabel: {
            color: "#76AEC6",
            fontSize: 14,
            rotate: 25,
          },
        },
        yAxis: {
          type: "value",
          //坐标轴轴线相关设置
          axisLine: {
            lineStyle: {
              color: "rgba(68,97,108, 1)",
            },
          },
          //坐标轴刻度相关设置
          axisTick: {
            show: false,
          },
          //坐标轴刻度标签的相关设置
          axisLabel: {
            color: "#76AEC6",
            fontSize: 14,
          },
          //坐标轴在 grid 区域中的分隔线
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(219, 241, 255,0.35)",
            },
          },
        },
        series: series,
      };

      option && this.environmentInstance.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.environmentInstance.resize();
      });
    },

    //////////////////////////////////////////////////////
    //查询季度检查数据
    getQuarterStatisticsData() {
      return new Promise((resolve, reject) => {
        statisticsQuarter({
          checkName: "",
          checkType: "",
          year: "",
        })
          .then((res) => {
            let { data } = res;
            this.$nextTick((_) => {
              setTimeout(() => {
                this.quarterlyDrawBarChart(data ?? []);
              }, 300);
            });
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    //季度检查情况
    quarterlyDrawBarChart(data = []) {
      let chartDom = this.$refs["bar-chart"];
      this.quarterInstance = echarts.init(chartDom);
      let yData = [],
        data_1 = [],
        data_2 = [],
        data_3 = [];
      data.forEach((v) => {
        if (v.total != 0) {
          yData.push(v.name);
          data_1.push(v.total);
          data_2.push(v.complete);
          data_3.push(v.notComplete);
        }
      });
      let option = {
        tooltip: {
          show: false,
          trigger: "axis",
          backgroundColor: "rgba(0,60,122,0.9)",
          borderWidth: 0,
          padding: [10, 10, 10, 10],
          textStyle: {
            color: "#76AEC6",
            fontSize: 14,
          },
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: 46,
          bottom: 10,
          left: 70,
          right: 40,
        },
        legend: {
          top: 22,
          left: "center",
          itemWidth: 18,
          itemHeight: 8,
          textStyle: {
            color: "#76AEC6",
            fontSize: 12,
          },
        },
        xAxis: {
          type: "value",
          //坐标轴在 grid 区域中的分隔线
          splitLine: {
            show: false,
          },
          //坐标轴刻度相关设置
          axisTick: {
            show: false,
          },
          //坐标轴轴线相关设置
          axisLine: {
            show: false,
          },
          //坐标轴刻度标签的相关设置
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: yData,
          //坐标轴刻度标签的相关设置
          axisLabel: {
            color: "#76AEC6",
            fontSize: 14,
          },
          //坐标轴在 grid 区域中的分隔线
          splitLine: {
            show: false,
          },
          //坐标轴刻度相关设置
          axisTick: {
            show: false,
          },
          //坐标轴轴线相关设置
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: "问题数",
            data: data_1,
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: [0, 3, 3, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                  {
                    offset: 0,
                    color: "rgba(16, 64, 96, 0)",
                  },
                  {
                    offset: 1,
                    color: "rgba(50, 129, 205, 1)",
                  },
                ]),
                label: {
                  show: true,
                  position: "right",
                  textStyle: {
                    //数值样式
                    color: "#419FFF",
                    fontSize: 14,
                  },
                },
              },
            },
          },
          {
            name: "已回复",
            data: data_2,
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: [0, 3, 3, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                  {
                    offset: 0,
                    color: "rgba(2, 82, 93, 0)",
                  },
                  {
                    offset: 1,
                    color: "rgba(1, 208, 211, 1)",
                  },
                ]),
                label: {
                  show: true,
                  position: "right",
                  textStyle: {
                    //数值样式
                    color: "#00FFFF",
                    fontSize: 14,
                  },
                },
              },
            },
          },
          {
            name: "未回复",
            data: data_3,
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: [0, 3, 3, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                  {
                    offset: 0,
                    color: "rgba(60, 82, 49, 0)",
                  },
                  {
                    offset: 1,
                    color: "rgba(200, 178, 35, 1)",
                  },
                ]),
                label: {
                  show: true,
                  position: "right",
                  textStyle: {
                    //数值样式
                    color: "#FFD71E",
                    fontSize: 14,
                  },
                },
              },
            },
          },
        ],
      };
      option && this.quarterInstance.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.quarterInstance.resize();
      });
    },
  },
  destroyed() {
    //清除定时器
    clearInterval(this.interval);
    this.interval = null;
    clearInterval(this.carousel.interval);
    this.carousel.interval = null;
    // this.quarterInstance.dispose();
    this.projectInstance.dispose();
    this.environmentInstance.dispose();
    this.realTimeInstance.dispose();
  },
};
</script>

<style lang="less" scoped>
.engineering-manage-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 110px 0 28px 0;
  overflow: hidden;
  .large-screen-body {
    height: 100%;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    // 卡片公共样式
    .card-container {
      position: relative;
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
      overflow: hidden;
      &:last-of-type {
        margin-bottom: 0;
      }
      .card-header {
        height: 36px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #fefe79;
        display: flex;
        align-items: center;
        padding-left: 44px;
        background: url("./images/header_4.png");
        background-size: 100% 100%;
      }
      .card-body {
        flex: 1;
        border-radius: 0px 0px 0px 8px;
        background: linear-gradient(
          to right,
          rgba(2, 25, 30, 0.2),
          rgba(0, 181, 217, 0.1)
        );
        border: 1px solid rgba(0, 213, 255, 0.3);
        position: relative;
        .chart-unit {
          position: absolute;
          top: 10px;
          left: 15px;
          z-index: 99;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #76aec6;
        }
        .chart-dom {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
    // 左侧
    .left-container {
      width: 400px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      //运行时间
      .run-time {
        height: 20%;
        .card-body {
          padding: 0 30px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .time {
            font-family: D-DIN;
            font-weight: 400;
            font-size: 30px;
            color: #00ffff;
            .unit {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #76aec6;
              padding: 0 4px;
            }
          }
          .base {
            width: 100%;
            height: 14px;
            background: url("./images/icon_28.png");
            background-size: 100% 100%;
          }
        }
      }
      //累计项目统计
      .accumulated-project-statistics {
        height: 20%;
        .card-body {
          padding: 0 62px 0 62px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          .accumulated-icon {
            position: relative;
            width: 70px;
            height: 70px;
            background: url("./images/icon_8.png");
            background-size: 100% 100%;
            .ani-icon {
              height: 38px;
              width: 38px;
              background: url("./images/icon_9.png");
              background-size: 100% 100%;
              position: absolute;
              left: 16px;
            }
          }
          .accumulated-body {
            padding-left: 20px;
            flex: 1;
            .sub-title {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #b8f3ff;
              padding-bottom: 10px;
            }
            .number-statistics {
              display: flex;
              .num-item {
                width: 32px;
                height: 42px;
                background: url("./images/icon_10.png");
                background-size: 100% 100%;
                margin-right: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: D-DIN;
                font-weight: 400;
                font-size: 34px;
                color: #93d5f8;
              }
              .unit {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #76aec6;
                position: relative;
                top: 20px;
              }
            }
          }
        }
      }
      .under-project-statistics,
      .people-number {
        height: 30%;
        .card-body {
          .chart-bg {
            position: absolute;
            left: 11.5%;
            top: 40%;
            width: 138px;
            height: 94px;
            background: url("./images/icon_16.png") no-repeat center;
            background-size: 100% 100%;
          }
          .chart-text {
            position: absolute;
            top: 53%;
            transform: translateY(-50%);
            left: 17.5%;
            width: 88px;
            height: 88px;
            background: url("./images/icon_17.png") no-repeat center;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .total {
              font-family: D-DIN;
              font-weight: bold;
              font-size: 22px;
              color: #b8f3ff;
            }
            .pro {
              font-size: 12px;
              color: #76aec6;
            }
          }
          .total-number {
            position: absolute;
            top: 10px;
            right: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #76aec6;
            span {
              font-size: 14px;
              color: #11ffb4;
            }
          }
        }
      }
      //高度大于等于 920px
      @media (min-height: 920px) {
        //运行时间
        .run-time {
          .card-body {
            .time {
              font-size: 32px;
            }
          }
        }
        //累计项目统计
        .accumulated-project-statistics {
          .card-body {
            .accumulated-body {
              .number-statistics {
                .num-item {
                  font-size: 36px;
                }
              }
            }
          }
        }
        //在建项目统计
        .under-project-statistics {
          .card-body {
            .chart-bg {
              top: 44%;
            }
          }
        }
        //现场实时人数
      }
    }
    // 中间
    .center-container {
      flex: 1;
      padding: 0 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .card-container {
        flex: 1;
        .card-header {
          background: url("./images/header_5.png");
          background-size: 100% 100%;
        }
      }
      //数据概览
      .data-overview {
        .card-body {
          padding: 14px 0 10px 0;
          box-sizing: border-box;
          display: flex;
          .sub-title {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #11ffb4;
            position: relative;
            padding-left: 44px;
            &::before {
              content: "";
              width: 32px;
              height: 34px;
              background: url("./images/icon_18.png");
              background-size: 100% 100%;
              position: absolute;
              top: -6px;
              left: 6px;
            }
          }
          .invest {
            width: 258px;
            display: flex;
            flex-direction: column;
            .money-warp {
              flex: 1;
              display: flex;
              flex-direction: column;
              .money-item {
                flex: 1;
                display: flex;
                align-items: center;
                padding-left: 10px;
                .money-icon {
                  width: 60px;
                  height: 56px;

                  &.icon-1 {
                    background: url("./images/918/icon_1.png");
                    background-size: 100% 100%;
                  }
                  &.icon-2 {
                    background: url("./images/918/icon_2.png");
                    background-size: 100% 100%;
                  }
                }
                .money-content {
                  padding-left: 10px;
                  flex: 1;
                  .value {
                    font-weight: 400;
                    font-size: 26px;
                    color: #f2fdff;
                    span {
                      font-size: 14px;
                      color: #76aec6;
                    }
                  }
                  .name {
                    font-weight: 400;
                    font-size: 14px;
                    color: #8fdbfc;
                  }
                }
              }
            }
          }
          .vertical-line {
            width: 5px;
            height: 100%;
            background: url("./images/918/icon_10.png");
            background-size: 100% 100%;
          }
          .situation {
            flex: 1;
            padding: 0 30px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            .start-project,
            .end-project {
              flex: 1;
              display: flex;
              flex-direction: column;
              .sub-title {
                padding-left: 36px;
                &::before {
                  left: -2px;
                }
              }
              .pro-warp {
                flex: 1;
                display: flex;
                align-items: center;
                .warp-item {
                  flex: 1;
                  display: flex;
                  align-items: center;
                  padding-left: 10px;
                  .data-icon {
                    width: 60px;
                    height: 56px;
                    &.icon-3 {
                      background: url("./images/918/icon_3.png");
                      background-size: 100% 100%;
                    }
                    &.icon-4 {
                      background: url("./images/918/icon_4.png");
                      background-size: 100% 100%;
                    }
                    &.icon-5 {
                      background: url("./images/918/icon_5.png");
                      background-size: 100% 100%;
                    }
                    &.icon-6 {
                      background: url("./images/918/icon_6.png");
                      background-size: 100% 100%;
                    }
                    &.icon-7 {
                      background: url("./images/918/icon_7.png");
                      background-size: 100% 100%;
                    }
                    &.icon-8 {
                      background: url("./images/918/icon_8.png");
                      background-size: 100% 100%;
                    }
                  }
                  .data-content {
                    padding-left: 10px;
                    flex: 1;
                    .value {
                      font-weight: 400;
                      font-size: 26px;
                      color: #f2fdff;
                      span {
                        font-size: 14px;
                        color: #76aec6;
                      }
                    }
                    .name {
                      font-weight: 400;
                      font-size: 14px;
                      color: #8fdbfc;
                    }
                  }
                }
              }
            }
            .horizontal-line {
              margin: 4px 0;
              width: 100%;
              height: 5px;
              background: url("./images/918/icon_11.png");
              background-size: 100% 100%;
            }
          }
        }
      }
      //智慧工地物联网上线情况
      .internet-things {
        position: relative;
        .number-devices {
          position: absolute;
          top: 10px;
          right: 50px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #8fdbfc;
          display: flex;
          align-items: center;
          .item {
            span {
              color: #00d5ff;
              font-size: 16px;
            }
            padding-right: 50px;
            &:nth-child(2) {
              span {
                color: #11ffb4;
              }
            }
            &:nth-child(3) {
              span {
                color: #fa7070;
              }
            }
          }
        }
        .card-body {
          position: relative;
          &::before {
            content: "";
            height: 100%;
            width: 914px;
            background: url("./images/918/icon_9.png");
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          }
        }
        @keyframes bounce {
          0%,
          100% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(-10px);
          }
        }
        .internet-item {
          position: absolute;
          text-align: center;
          .round {
            width: 88px;
            height: 88px;
            background: url("./images/round_1.png");
            background-size: 100% 100%;
            animation: bounce 2s infinite;
            display: flex;
            align-items: center;
            justify-content: center;

            span:nth-child(1) {
              font-family: D-DIN;
              font-weight: 400;
              font-size: 26px;
              color: rgba(57, 254, 131, 0);
              line-height: 34px;
              background: linear-gradient(0deg, #11ffb4 0%, #d2fff3 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            span:nth-child(2) {
              font-family: D-DIN;
              font-weight: 400;
              font-size: 18px;
              color: #8fdbfc;
              line-height: 34px;
              background: linear-gradient(0deg, #15a9f6 0%, #d4f0ff 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
          .name {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #eef9ff;
          }
          &:nth-child(1) {
            top: 40px;
            left: 22px;
          }
          &:nth-child(2) {
            top: 90px;
            left: 132px;
            .round {
              background: url("./images/round_2.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(3) {
            top: 2px;
            left: 250px;
            .round {
              background: url("./images/round_3.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(4) {
            top: 100px;
            left: 350px;
            .round {
              background: url("./images/round_4.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(5) {
            top: 100px;
            right: 350px;
            .round {
              background: url("./images/round_1.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(6) {
            top: 2px;
            right: 250px;
            .round {
              background: url("./images/round_2.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(7) {
            top: 90px;
            right: 132px;
            .round {
              background: url("./images/round_3.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(8) {
            top: 40px;
            right: 22px;
            .round {
              background: url("./images/round_5.png");
              background-size: 100% 100%;
            }
          }
        }
      }
      //关键线路进度达成情况
      .line-situation {
        .card-body {
          overflow: hidden;
        }
      }

      //高度大于等于 920px
      @media (min-height: 920px) {
        .data-overview {
          .invest {
            .money-warp {
              .money-item {
                .money-icon {
                  width: 66px !important;
                  height: 64px !important;
                  &.icon-1 {
                    background: url("./images/1080/icon_1.png");
                    background-size: 100% 100%;
                  }
                  &.icon-2 {
                    background: url("./images/1080/icon_2.png");
                    background-size: 100% 100%;
                  }
                }
              }
            }
          }
          .situation {
            .start-project,
            .end-project {
              .pro-warp {
                .warp-item {
                  .data-icon {
                    width: 66px !important;
                    height: 64px !important;
                    &.icon-3 {
                      background: url("./images/1080/icon_3.png");
                      background-size: 100% 100%;
                    }
                    &.icon-4 {
                      background: url("./images/1080/icon_4.png");
                      background-size: 100% 100%;
                    }
                    &.icon-5 {
                      background: url("./images/1080/icon_5.png");
                      background-size: 100% 100%;
                    }
                    &.icon-6 {
                      background: url("./images/1080/icon_6.png");
                      background-size: 100% 100%;
                    }
                    &.icon-7 {
                      background: url("./images/1080/icon_7.png");
                      background-size: 100% 100%;
                    }
                    &.icon-8 {
                      background: url("./images/1080/icon_8.png");
                      background-size: 100% 100%;
                    }
                  }
                }
              }
            }
          }
        }
        .internet-things {
          .card-body {
            &::before {
              content: "";
              height: 100%;
              width: 954px;
              background: url("./images/1080/icon_9.png");
              background-size: 100% 100%;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
            }
          }
          .internet-item {
            &:nth-child(1) {
              top: 54px;
              left: 22px;
            }
            &:nth-child(2) {
              top: 124px;
              left: 132px;
            }
            &:nth-child(3) {
              top: 30px;
              left: 250px;
            }
            &:nth-child(4) {
              top: 144px;
              left: 350px;
            }

            &:nth-child(5) {
              top: 144px;
              right: 350px;
            }
            &:nth-child(6) {
              top: 30px;
              right: 250px;
            }
            &:nth-child(7) {
              top: 124px;
              right: 132px;
            }
            &:nth-child(8) {
              top: 54px;
              right: 22px;
            }
          }
        }
      }
    }
    // 右侧
    .right-container {
      width: 400px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .technology-achievement {
        height: 67%;
        .card-body {
          padding: 16px 6px 0 6px;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;
          overflow: auto;
          .bar-item {
            width: 50%;
            height: 50px;
            padding: 0 0 0 14px;
            box-sizing: border-box;
            margin-bottom: 15px;
            display: flex;
            .icon {
              width: 48px;
              height: 48px;
              &.icon-0 {
                background: url("./images/icon_29.png");
                background-size: 100% 100%;
              }
              &.icon-1 {
                background: url("./images/icon_30.png");
                background-size: 100% 100%;
              }
              &.icon-2 {
                background: url("./images/icon_31.png");
                background-size: 100% 100%;
              }
              &.icon-3 {
                background: url("./images/icon_32.png");
                background-size: 100% 100%;
              }
              &.icon-4 {
                background: url("./images/icon_33.png");
                background-size: 100% 100%;
              }
              &.icon-5 {
                background: url("./images/icon_34.png");
                background-size: 100% 100%;
              }
              &.icon-6 {
                background: url("./images/icon_35.png");
                background-size: 100% 100%;
              }
              &.icon-7 {
                background: url("./images/icon_36.png");
                background-size: 100% 100%;
              }
              &.icon-8 {
                background: url("./images/icon_37.png");
                background-size: 100% 100%;
              }
              &.icon-9 {
                background: url("./images/icon_38.png");
                background-size: 100% 100%;
              }
              &.icon-10 {
                background: url("./images/icon_39.png");
                background-size: 100% 100%;
              }
              &.icon-11 {
                background: url("./images/icon_40.png");
                background-size: 100% 100%;
              }
              &.icon-12 {
                background: url("./images/icon_41.png");
                background-size: 100% 100%;
              }
              &.icon-13 {
                background: url("./images/icon_42.png");
                background-size: 100% 100%;
              }
              &.icon-14 {
                background: url("./images/icon_43.png");
                background-size: 100% 100%;
              }
              &.icon-15 {
                background: url("./images/icon_29.png");
                background-size: 100% 100%;
              }
              &.icon-16 {
                background: url("./images/icon_30.png");
                background-size: 100% 100%;
              }
              &.icon-17 {
                background: url("./images/icon_31.png");
                background-size: 100% 100%;
              }
              &.icon-18 {
                background: url("./images/icon_32.png");
                background-size: 100% 100%;
              }
              &.icon-19 {
                background: url("./images/icon_33.png");
                background-size: 100% 100%;
              }
              &.icon-20 {
                background: url("./images/icon_34.png");
                background-size: 100% 100%;
              }
            }
            .total-statistics {
              flex: 1;
              padding-left: 14px;
              .value {
                font-weight: 400;
                font-size: 20px;
                color: #01eaeb;
              }
              .name {
                font-weight: 400;
                font-size: 14px;
                color: #8fdbfc;
              }
            }
            &:nth-child(2),
            &:nth-child(8) {
              .total-statistics {
                .value {
                  color: #60e82b;
                }
              }
            }
            &:nth-child(3),
            &:nth-child(9) {
              .total-statistics {
                .value {
                  color: #ffc554;
                }
              }
            }
            &:nth-child(4),
            &:nth-child(10),
            &:nth-child(13) {
              .total-statistics {
                .value {
                  color: #62beff;
                }
              }
            }
            &:nth-child(6),
            &:nth-child(12) {
              .total-statistics {
                .value {
                  color: #e7e764;
                }
              }
            }
            &:nth-child(11) {
              .total-statistics {
                .value {
                  color: #11ffb4;
                }
              }
            }
            &:nth-child(14) {
              .total-statistics {
                .value {
                  color: #8aa8ff;
                }
              }
            }
          }
        }
      }
      //现场环境参数
      .environment {
        height: 33%;
        .group-button {
          position: absolute;
          top: 12px;
          right: 16px;
          display: flex;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #b8f3ff;
          :nth-child(1) {
            border-radius: 11px 0px 0px 11px;
            border: 1px solid #20b0ec;
            border-right: 0;
          }
          :nth-child(2) {
            border: 1px solid #20b0ec;
          }
          :nth-child(3) {
            border-radius: 0px 11px 11px 0px;
            border: 1px solid #20b0ec;
            border-left: 0;
          }
          div {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 22px;
            background: rgba(24, 154, 208, 0.3);
            cursor: pointer;
          }
          .active {
            color: #ffffff;
            background: rgba(219, 163, 13, 0.5);
            border-color: #fefe79;
          }
        }
        .card-body {
          .chart-unit {
            top: 40px;
            left: 16px;
          }
          .device-state {
            position: absolute;
            top: 14px;
            left: 16px;
            display: flex;
            justify-content: space-between;
            font-weight: 400;
            font-size: 14px;
            color: #76aec6;
            :nth-child(1) {
              span {
                font-size: 16px;
                color: #00d5ff;
              }
            }
            :nth-child(2) {
              padding: 0 26px;
              box-sizing: border-box;
              span {
                font-size: 16px;
                color: #11ffb4;
              }
            }
            :nth-child(3) {
              span {
                font-size: 16px;
                color: #fa7070;
              }
            }
          }
        }
      }
      //高度大于等于 920px
      @media (min-height: 920px) {
        .technology-achievement {
          .card-body {
            padding-top: 20px;
            .bar-item {
              margin-bottom: 30px;
            }
          }
        }
      }
    }
  }
}
</style>
